<!--
 * @Copyright: Copyright (c) 2021 andyten
 * @Description:  vuex
 * @Author: andy.ten@tom.com
 * @Date: 2021-08-29 16:50:31
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2021-11-03 15:45:16
 * @Version: 1.0.1
-->
<template>
  <div>
    <p class="header-title" :style="{ fontSize: 18 + 'px', fontWeight: 'bold' }">vuex：</p>
    <div>
      <p>组建中显示全局状态:</p>
      <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </div>
      <p :style="{ color: 'red' }">{{ getCount }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {};
  },
  computed: {
    getCount() {
      return this.$store.state.g_count;
    },
  },
  methods: {
    count2() {
      return this.$store.state.g_count;
    },
    increment() {
      this.$store.commit('increment');
      console.log(this.$store.state.g_count);
    },
    decrement() {
      this.$store.commit('decrement');
      console.log(this.$store.state.g_count);
    },
  },
};
</script>
